<template>
    <div class="contact">
        <div class="contact_container">
            <div class="citem left">
                <div class="title">
                    <img src="../assets/img/icon_enter.png" class="icon_title" alt="">
                    <span>Contact Us</span>
                </div>
                <p class="company_name">码赫镭（上海）数字科技有限公司</p>
            </div>
            <div class="citem right">
                <div class="ritem">
                    <div class="iconbox">
                        <img src="../assets/img/icon_email.png" alt="">
                    </div>
                    <div class="textbox">
                        <p>business@mahelei.com</p>
                        <p>mii@mahelei.com</p>
                    </div>
                </div>
                <div class="ritem">
                    <div class="iconbox">
                        <img src="../assets/img/icon_phone.png" alt="">
                    </div>
                    <div class="textbox">
                        <p>021-56079110</p>
                    </div>
                </div>
                <div class="ritem">
                    <div class="iconbox">
                        <img src="../assets/img/icon_position.png" alt="">
                    </div>
                    <div class="textbox">
                        <p>上海市杨浦区政学路88号5号楼1005室</p>
                        <p>Room 1005, Building 5, No. 88 Zhengxue Road, Yangpu District, Shanghai</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>

</script>

<style lang="scss" scoped>
.contact {
    margin-top: 8vw;

    .contact_container {
        width: 91vw;
        margin: 4.2vw auto;
        display: flex;

        .citem {
            text-align: left;
        }

        .left {
            width: 40%;
            font-size: 1.84vw;

            .title {
                display: flex;
                justify-content: flex-start;
                align-items: center;

                img {
                    width: 1.7vw;
                }

                span {
                    font-family: Arial;
                    font-weight: normal;

                    padding-left: 0.5vw;
                }
            }

            .company_name {
                font-weight: 500;
                padding-top: 2.4vw;
            }
        }

        .right {
            width: 60%;
            margin-top: 4.2vw;

            .ritem {
                display: flex;
                justify-content: flex-start;
                margin-bottom: 1.2vw;

                .iconbox {
                    img {
                        width: 1.2vw;
                    }
                }

                .textbox {
                    margin-left: 0.5vw;

                    p {
                        font-weight: 500;
                        font-size: 1.23vw;
                        line-height: 1.4;
                        text-transform: uppercase;
                    }
                }
            }
        }
    }
}
</style>